import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom'
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { Input, Button, Form, Checkbox } from 'antd';
import type { FormProps } from 'antd';
import LineNumber from '@/assets/icons/LinedNumber.svg'
import codeImg from '@/assets/yanzhengcode.png'
import './index.scss'

type FieldType = {
  username?: string;
  password?: string;
  remember?: string;
};

const Login = () => {
  const [form] = Form.useForm();
  const navigate = useNavigate()

  const [title, setTitle] = useState('用户密码登录'); //  用户密码登录 or 你好，欢迎登录
  const [showCode, setshowCode] = useState(true); // 输错超过3次需要验证码来验证

  const onFinish: FormProps<FieldType>['onFinish'] = (values: any) => {
    console.log('Success:', values);
    navigate('/home', {
      state: {
        id: 111,
        name: 'fromhome'
      }
    })

  }
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <div className="login">
      <div className="login-bg">
        <h1 className="login-title">开放协调互联平台</h1>
      </div>
      <div className="login-form">
        <Form className='form-wrap' form={form}
          initialValues={{ agreement: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <div className="login-operateContext">
            <p className='login-label'>{title}</p>
            <Form.Item name="username" noStyle>
              <Input className='login-user' size="large" placeholder="用户名" prefix={<UserOutlined className='user-icon' />} />
            </Form.Item>
            <Form.Item name="password" noStyle
              rules={[{ required: true, message: '用户名或密码不正确!' }]}
            >
              <Input.Password
                className='login-password'
                size="large"
                placeholder="用户密码"
                prefix={<LockOutlined className='password-icon' />}
              />
            </Form.Item>

            {showCode && <div className='code-wrap'>
              <Form.Item name="code" noStyle>
                <Input className='code' size="large" placeholder="验证码" prefix={<img src={LineNumber} />} />
              </Form.Item>

              <img className='code-img' src={codeImg} />
              <span className='invisibility'>看不清</span>
            </div>}
            <Form.Item label={null} noStyle>
              <Button type="primary" htmlType="submit" className='login-btn'>
                登录
              </Button>
            </Form.Item>
            <div className='login-agree-wrap'>
              <div className='left'>
                <Form.Item name="agreement" valuePropName="checked" label={null} noStyle>
                  <Checkbox></Checkbox>
                </Form.Item>
                <span className='agree-wrap'>同意《<span className='user'>用户协议</span>》和《<span className='privacy'>隐私协议</span>》</span>
              </div>
              <span className='right'>忘记密码</span>
            </div>
          </div>

        </Form>
        <p className="login-tips">© Copyright Seeyon Corp. 2014, 2023. All rights reserved.</p>
      </div>
    </div>
  )
}

export default Login;
